<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
</head>
<link rel="stylesheet" href="backend/bootStrap/css/bootstrap.min.css">
<link rel="stylesheet" href="backend/css/main.css">
<body>
<div id="content4" class="content-body">
    <div class="user_table">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">商品列表</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">添加商品</a></li>
        </ul>
        <br/>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <!--嵌套基础面板：处理用户列表面板-->
                    <div class="text-center">
                        <!--内联表单-->
                        <form class="form-inline" action="./goodsList" method="post" id="selectUsers" style="font-size: 18px;margin-bottom: 6px;margin-top: 6px;">
                            <div class="form-group">
                                <label for="selectGoodsID">ID</label>
                                <input type="text" class="form-control" id="selectGoodsID" name="selectGoodsID" placeholder="12" value="${param.selectGoodsID }" style="width: 80px;">
                            </div>
                            <div class="form-group">
                                <label for="selectGoodsName">名称</label>
                                <input type="text" class="form-control" id="selectGoodsName" name="selectGoodsName" placeholder="男装牛仔裤" value="${param.selectGoodsName }">
                            </div>
                            <div class="form-group">
                                <label for="selectSupplier">店铺</label>
                                <input type="text" class="form-control" id="selectSupplier" name="selectSupplier" placeholder="ZARA官方旗舰店" value="${param.selectSupplier }">
                            </div>
                            <div class="form-group">
                                <label for="selectType">类别</label>
                                <select class="form-control" id="selectType" name="selectType">
                                    <option value="" hidden>请选择</option>
                                    <c:forEach var="type" items="${types}">
                                        <option value="${type.typeId}" ${param.selectType == type.typeId ? 'selected' : ''}>${type.typeName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-success">Send</button>
                            <button type="reset" class="btn btn-primary">Reset</button>
                        </form>
                    </div>
                    <!--栅格布局-->
                    <div class="row">
                        <div class="col-md-12">
                            <!--表格-->
                            <table class="table table-hover table-bordered" style="width: 100%;">
                                <thead class="thead-light">
                                <tr>
                                    <th style="white-space:nowrap;">#</th>
                                    <th style="white-space:nowrap;">商品名称</th>
                                    <th style="white-space:nowrap;">类别</th>
                                    <th style="white-space:nowrap;">图片</th>
                                    <th style="white-space:nowrap;">描述</th>
                                    <th style="white-space:nowrap;">价格</th>
                                    <th style="white-space:nowrap;">折扣</th>
                                    <th style="white-space:nowrap;">商家</th>
                                    <th style="white-space:nowrap;">销量</th>
                                    <th style="white-space:nowrap;">库存</th>
                                    <th style="white-space:nowrap;">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:if test="${empty goods }">
                                    <th colspan="11">暂无数据</th>
                                </c:if>
                                <c:if test="${!empty goods }">
                                    <c:forEach var="good" items="${goods }">
                                        <tr style="font-size: 18px">
                                            <td style="white-space:nowrap;">${good.goodsId}</td>
                                            <td style="white-space:nowrap;">
                                                <span>${fn:substring(good.goodsName, 0, 5)}...</span>
                                                <span id="goodsNameAll" style="display: none;">${good.goodsName }</span>
                                            </td>
                                            <td style="white-space:nowrap;">
                                                <c:forEach var="type" items="${types }">
                                                    <c:if test="${good.typeId == type.typeId}">
                                                        <span>${type.typeName}</span>
                                                        <span id="goodsTypeID" style="display: none;">${type.typeId}</span>
                                                    </c:if>
                                                </c:forEach>
                                            </td>
                                            <td><img src="${good.goodsImage }" alt="${good.goodsImage }" style="width: 45px;height: 45px;"></td>
                                            <td style="white-space:nowrap;">
                                                <span id="descChange">${fn:substring(good.goodsDesc, 0, 8)}...</span>
                                                <span id="goodsDescription" style="display: none;">${good.goodsDesc }</span>
                                            </td>
                                            <td style="white-space:nowrap;">${good.goodsPrice }</td>
                                            <td style="white-space:nowrap;">${good.goodsDiscount }</td>
                                            <td style="white-space:nowrap;">${good.supplier }</td>
                                            <td style="white-space:nowrap;">${good.salesQty }</td>
                                            <td style="white-space:nowrap;">${good.stockQty }</td>
                                            <td style="white-space:nowrap;">
                                                <a href="#" class="btn btn-danger btn-md" onclick="confirmDelete(${good.goodsId})">删除</a>
                                                <a href="" class="btn btn-info btn-md" data-toggle="modal" data-target="#updateUserModal">修改</a>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    <tr>
                                        <th colspan="11">${page }</th>
                                    </tr>
                                    <!-- 模态框（Modal） -->
                                    <div class="modal fade" id="updateUserModal" tabindex="-1" role="dialog" aria-labelledby="updateUserModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header" style="background-color: #f5f5f5; border-top-left-radius: 5px; border-top-right-radius: 5px;">
                                                    <h5 class="modal-title" id="updateUserModalLabel">修改商品信息</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body" style="padding: 20px; background-color: #fff; font-size: 18px;font-family: 微软雅黑">
                                                    <!-- 表单内容 -->
                                                    <form method="post" action="./updateGood" id="updateForm" enctype="multipart/form-data" >
                                                        <div class="form-group">
                                                            <label for="goodsName">商品名称</label>
                                                            <input type="text" class="form-control" id="goodsName" name="goodsName">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="typeId">商品类别</label>
                                                            <select class="form-control" id="typeId" name="typeId">
                                                                <c:forEach var="type" items="${types}">
                                                                    <option value="${type.typeId}">${type.typeName}</option>
                                                                </c:forEach>
                                                            </select>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="goodsImage">图片</label>
                                                            <span id="goodsImage">
                                                                <img src="" id="avatar" class="avatar" style="width: 80px;height: 80px;">
                                                                <input type="file" id="file-input" name="file-input">
                                                            </span>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="goodsDesc">描述</label>
                                                            <input type="text" class="form-control" id="goodsDesc" name="goodsDesc">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="goodsPrice">价格</label>
                                                            <input type="text" class="form-control" id="goodsPrice" name="goodsPrice">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="goodsDiscount">折扣</label>
                                                            <input type="text" class="form-control" id="goodsDiscount" name="goodsDiscount">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="supplier">商家</label>
                                                            <input type="text" class="form-control" id="supplier" name="supplier">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="salesQty">销量</label>
                                                            <input type="text" class="form-control" id="salesQty" name="salesQty">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="stockQty">库存</label>
                                                            <input type="text" class="form-control" id="stockQty" name="stockQty">
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer" style="text-align: right;">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                                    <button type="button" class="btn btn-primary" id="updateUser" onclick="updateUser()">保存</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </c:if>
                                </tbody>
                            </table>
                        </div>
                    </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <!--嵌套基础面板：处理用户列表面板-->
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form method="post" action="./addGood" enctype="multipart/form-data" id="insertForm" style="width: 800px;margin: 0 auto">
                            <div class="form-group">
                                <label for="addGoodName">商品名称</label>
                                <input type="text" class="form-control" id="addGoodName" name="addGoodName" placeholder="商品名称">
                            </div>
                            <div class="form-group">
                                <label for="addTypeId">商品类别</label>
                                <select class="form-control" id="addTypeId" name="addTypeId">
                                    <c:forEach var="type" items="${types}">
                                        <option value="${type.typeId}">${type.typeName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="addHeadImg">商品照片</label>
                                <span id="addHeadImg">
                                    <input type="file" id="add-file-input" name="file-input">
                                    <img src="" id="addAvatar" class="avatar" style="width: 80px;height: 80px;">
                                </span>
                            </div>
                            <div class="form-group">
                                <label for="addDesc">商品描述</label>
                                <input type="text" class="form-control" id="addDesc" name="addDesc" placeholder="商品描述">
                            </div>
                            <div class="form-group">
                                <label for="addPrice">商品单价</label>
                                <input type="text" class="form-control" id="addPrice" name="addPrice" placeholder="商品单价">
                            </div>
                            <div class="form-group">
                                <label for="addDiscount">商品折扣率</label>
                                <input type="text" class="form-control" id="addDiscount" name="addDiscount" placeholder="商品折扣率">
                            </div>
                            <div class="form-group">
                                <label for="addSupplier">商家</label>
                                <input type="text" class="form-control" id="addSupplier" name="addSupplier" placeholder="商家">
                            </div>
                            <div class="form-group">
                                <label for="addSalesQty">销量</label>
                                <input type="text" class="form-control" id="addSalesQty" name="addSalesQty" placeholder="销量">
                            </div>
                            <div class="form-group">
                                <label for="addStockQty">库存</label>
                                <input type="text" class="form-control" id="addStockQty" name="addStockQty" placeholder="库存量">
                            </div>
                            <button type="submit" class="btn btn-success">上架</button>
                            <button type="reset" class="btn btn-primary">重置</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="backend/js/jquery-3.7.1.js"></script>
<script src="backend/bootStrap/js/bootstrap.min.js"></script>
<script>
    // 获取所有修改按钮
    var updateBtns = document.querySelectorAll('.btn-info');

    // 遍历修改按钮，为每个按钮添加点击事件
    for (var i = 0; i < updateBtns.length; i++) {
        updateBtns[i].addEventListener('click', function() {
            // 获取当前行的数据
            var row = this.parentElement.parentElement;
            var goodsName = row.cells[1].querySelector('#goodsNameAll').innerText;
            var typeId = row.cells[2].querySelector('#goodsTypeID').innerText;
            var goodsImage = row.cells[3].querySelector('img').src;
            var goodsDesc = row.cells[4].querySelector('#goodsDescription').innerText;
            var goodsPrice = row.cells[5].innerText;
            var goodsDiscount = row.cells[6].innerText;
            var supplier = row.cells[7].innerText;
            var salesQty = row.cells[8].innerText;
            var stockQty = row.cells[9].innerText;
            // 将数据填充到模态框中
            document.getElementById('goodsName').value = goodsName;
            document.getElementById('typeId').value = typeId;
            document.getElementById('goodsImage').querySelector('img').src = goodsImage;
            document.getElementById('goodsDesc').value = goodsDesc;
            document.getElementById('goodsPrice').value = goodsPrice;
            document.getElementById('goodsDiscount').value = goodsDiscount;
            document.getElementById('supplier').value = supplier;
            document.getElementById('salesQty').value = salesQty;
            document.getElementById('stockQty').value = stockQty;
            document.getElementById('typeId').value = typeId;
        });
    }
    // 为模态框的保存按钮添加点击事件
    document.querySelector('#updateUser').addEventListener('click', function() {
        // 提交修改后的数据
        document.getElementById('updateForm').submit();
        // 关闭模态框
        $('#updateUserModal').modal('hide');
    });
</script>
<script>
    document.getElementById('add-file-input').addEventListener('change', function (e) {
        var file = e.target.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById('addAvatar').src = e.target.result;
            }
            reader.readAsDataURL(file);
        }
    });
</script>
<script>
    function confirmDelete(userId) {
        if (confirm('确定要删除吗？')) {
            window.location.href = './deleteGoods?id=' + userId;
        }
    }
</script>
<script>
    window.onload = function() {
        checkError();
    }
    function checkError() {
        var errorMsg = "${errorMsg}";
        var successMsg = "${successMsg}";
        if (successMsg){
            alert(successMsg);
            <% session.removeAttribute("successMsg"); %>
        }
        if (errorMsg) {
            alert(errorMsg);
            <% session.removeAttribute("errorMsg"); %>
        }
    }
</script>
</body>
</html>
